<template>
    <div>
        <input ref="percent" type="text" v-model='value' readonly="readonly" data-thickness="0.1" data-width="150" data-height="150" data-fgColor="#108EE9">

    </div>
</template>

<script>
export default {
  data() {
    return {
      value: 50
    };
  },
  mounted() {
    var _this=this
    // console.log(this.$refs);
    this.loadPercent();
  },
  methods: {
    loadPercent() {
      $(this.$refs.percent).knob({
        /*change : function (value) {
             //console.log("change : " + value);
             },
             release : function (value) {
             console.log("release : " + value);
             },
             cancel : function () {
             console.log("cancel : " + this.value);
             },*/
        draw: function() {
          // "tron" case
          if (this.$.data("skin") == "tron") {
            var a = this.angle(this.cv), // Angle
              sa = this.startAngle, // Previous start angle
              sat = this.startAngle, // Start angle
              ea, // Previous end angle
              eat = sat + a, // End angle
              r = true;

            this.g.lineWidth = this.lineWidth;

            this.o.cursor && (sat = eat - 0.3) && (eat = eat + 0.3);

            if (this.o.displayPrevious) {
              ea = this.startAngle + this.angle(this.value);
              this.o.cursor && (sa = ea - 0.3) && (ea = ea + 0.3);
              this.g.beginPath();
              this.g.strokeStyle = this.previousColor;
              this.g.arc(
                this.xy,
                this.xy,
                this.radius - this.lineWidth,
                sa,
                ea,
                false
              );
              this.g.stroke();
            }

            this.g.beginPath();
            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
            this.g.arc(
              this.xy,
              this.xy,
              this.radius - this.lineWidth,
              sat,
              eat,
              false
            );
            this.g.stroke();

            this.g.lineWidth = 2;
            this.g.beginPath();
            this.g.strokeStyle = this.o.fgColor;
            this.g.arc(
              this.xy,
              this.xy,
              this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3,
              0,
              2 * Math.PI,
              false
            );
            this.g.stroke();

            return false;
          }
        }
      });
    }
  }
};
</script>

<style>
</style>
